import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Image } from 'ant-design-vue'

@Component
export class RenderItem extends Render {
    @Prop({ default: '' }) src?: string
    @Prop({ default: '' }) name!: string

    @Emit('click')
    handleClick() {}

    render() {
        return (
            <div
                class="bg-white cursor-pointer rounded-sm px-25px my-10px py-36px rounded-lg flex flex-col justify-center items-center"
                onClick={this.handleClick}
            >
                <Image preview={false} class="!w-64px !h-64px" src={this.src}></Image>
                <div class="mt-32px whitespace-nowrap">{this.name}</div>
            </div>
        )
    }
}

export default toNative<{ src?: string; name: string }, { click: () => void }>(RenderItem)
